import React, { useEffect, useState } from "react";
import "../../assets/sass/create_template/header/header.css";
import vip from "../../assets/image/create_template/header/vip.svg";
import risk_tip from "../../assets/image/create_template/header/risk_tip.svg";
import {
  EditOutlined,
  CameraOutlined,
  CustomerServiceOutlined,
  PlaySquareOutlined,
  AppstoreAddOutlined,
  TeamOutlined,
  UnorderedListOutlined,
  CloseOutlined,
} from "@ant-design/icons";

const Header = (props: any) => {
  const [imgBoxShow, setImgBoxShow] = useState(false);

  useEffect(() => {
    (async () => {
      setImgBoxShow(props.imgBoxShow);
    })();
  }, [props]);

  const ImageList = [
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938180_1555.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938184_4868.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938185_3278.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938187_6263.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938188_8891.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938189_3296.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938190_3571.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938191_8906.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938192_2179.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938194_5614.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938195_6232.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938196_5804.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938197_5636.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938322_1554.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938323_7880.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938324_5122.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938325_8752.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938327_6118.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938328_4387.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938329_7911.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938330_1018.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938332_4186.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938333_8277.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938334_3107.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938336_3186.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938337_7729.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938338_9545.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938339_4597.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938358_7042.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938359_4394.jpg",
    },
    {
      imgUrl: "http://img.dadianjing.cn/o/ec/201510/27/1445938360_7086.jpg",
    },
  ];
  const imgIconEnter = () => {
    setImgBoxShow(true);
    console.log(imgBoxShow, "open");
  };
  const colseImgBox = (e: { stopPropagation: () => void }) => {
    e.stopPropagation();
    setImgBoxShow(false);
    props.closeImgBox();
  };

  const createTextTmp = () => {};

  //添加背景图片
  const addImage = (e) => {
    e.stopPropagation();
    setImgBoxShow(false);
    props.closeImgBox();
    const arerDom: any = document.querySelector(".edid_area");
    arerDom.style.backgroundImage = `url("${e.target.currentSrc}")`;
  };
  return (
    <div className="header">
      <div className="header_left">
        <div className="logo">
          <img src="/src/assets/image/create_template/header/logo.jpg" />
        </div>
        <div className="open_meneber">
          <img src={vip} />
          <span>开通会员</span>
          <img
            className="open_meneber_popup"
            src="/src/assets/image/create_template/header/open_meneber.jpg"
          />
        </div>
        <div className="risk_tip">
          <img src={risk_tip} />
          <span>风险提示</span>
        </div>
      </div>
      <div className="header_center">
        <div className="icon_item" onClick={createTextTmp}>
          <EditOutlined className="icon" />
          <div className="text">文本</div>
        </div>
        <div className="icon_item" onClick={imgIconEnter}>
          <CameraOutlined className="icon" />
          <div className="text">图片</div>
          {imgBoxShow && (
            <div className="imgListBox">
              <div className="imgListBoxc">
                <div className="left"></div>
                <div className="right">
                  <div className="right_top">
                    <div className="colse_box" onClick={colseImgBox}>
                      <CloseOutlined className="close" />
                    </div>
                  </div>
                  <div className="img_box">
                    <div className="img_box_scroll">
                      {ImageList &&
                        ImageList.map((item, index) => {
                          return (
                            <div className="img_item" key={index}>
                              <img src={item.imgUrl} onClick={addImage} />
                            </div>
                          );
                        })}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="icon_item">
          <CustomerServiceOutlined className="icon" />
          <div className="text">音乐</div>
        </div>
        <div className="icon_item">
          <PlaySquareOutlined className="icon" />
          <div className="text">视频</div>
        </div>
        <div className="line"></div>
        <div className="icon_item">
          <AppstoreAddOutlined className="icon" />
          <div className="text">组件</div>
        </div>
        <div className="icon_item">
          <TeamOutlined className="icon" />
          <div className="text">营销获客</div>
        </div>
      </div>
      <div className="header_right">
        <div className="more">
          <UnorderedListOutlined className="more_icon" />
          <span className="more_text">更多</span>
        </div>
        <button className="setting">预览和设置</button>
        <button className="save">保存</button>
        <button className="publish">发布</button>
        <button className="out">退出</button>
      </div>
    </div>
  );
};

export default Header;
